<template>
  <div>
    <el-container>
      <el-aside width="200px"><Aside /></el-aside>
      <el-container>
        <el-header><Header /></el-header>
        <el-main style="padding: 0"
          ><router-view />
          <div v-if="this.$route.path == '/home'">
            <el-row :gutter="20" class="mgb20">
              <el-col :span="6">
                <el-card>
                  <div class="grid-content">
                    <div class="grid-cont-center">
                      <div class="grid-num">{{ userCount }}</div>
                      <div>用户数量</div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <div class="grid-content">
                    <div class="grid-cont-center">
                      <div class="grid-num">{{ psCount }}</div>
                      <div>宣讲会数量</div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <div class="grid-content">
                    <div class="grid-cont-center">
                      <div class="grid-num">{{ recruitCount }}</div>
                      <div>招聘岗位数量</div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card>
                  <div class="grid-content">
                    <div class="grid-cont-center">
                      <div class="grid-num">{{ resumeCount }}</div>
                      <div>简历投递数量</div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <div
              id="userBT"
              style="
                height: 300px;
                width: 300px;
                float: left;
                margin-left: 13%;
                margin-top: 10px;
              "
            ></div>
            <div
              id="hotJob"
              style="
                height: 300px;
                width: 50%;
                margin-top: 10px;
                margin-left: 50.5%;
              "
            ></div>
            <div
              id="hotCity"
              style="float: left; height: 270px; width: 50%"
            ></div>
            <div
              id="hotEE"
              style="float: right; height: 270px; width: 50%"
            ></div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Aside from "@/components/Aside.vue";
import * as echarts from "echarts";

export default {
  components: {
    Header,
    Aside,
  },
  data() {
    return {
      sCount: 0,
      eCount: 0,
      psCount: 0,
      userCount: 0,
      hotEE: [],
      position: [],
      positionCount: [],
      cityCount: [],
      cityName: [],
      recruitCount: 0,
      resumeCount: 0,
    };
  },
  mounted() {
    this.getECount();
    this.getPsCount();
    this.getHotInfo();
  },
  methods: {
    getECount() {
      this.$get("enterprise/1/100").then((res) => {
        if (res.code == 200) {
          this.eCount = res.data.total;
          this.$get("student/1/100").then((resp) => {
            if (resp.code == 200) {
              this.sCount = resp.data.total;
              this.getUser();
              this.userCount = this.sCount + this.eCount;
            }
          });
        }
      });
    },
    getPsCount() {
      this.$get("classroom/").then((res) => {
        if (res.code == 200) {
          this.psCount = res.data;
        }
      });
    },
    getHotInfo() {
      this.$get("recruit/").then((res) => {
        if (res.code == 200) {
          this.recruitCount = res.data;
        }
      });
      this.$get("recruit/hot").then((res) => {
        if (res.code == 200) {
          let c = 0;
          for (let item in res.data.hotPosition) {
            this.resumeCount += res.data.hotPosition[item];
            this.position.push(item);
            this.positionCount.push(res.data.hotPosition[item]);
            c++;
            if (c > 4) {
              break;
            }
          }
          for (let item in res.data.hotEnterprise) {
            let obj = { name: item, value: res.data.hotEnterprise[item] };
            this.hotEE.push(obj);
          }
          let n = 0;
          for (let item in res.data.hotCity) {
            this.cityName.push(item);
            this.cityCount.push(res.data.hotCity[item]);
            n++;
            if (n > 4) {
              break;
            }
          }
        }
        this.getHotJob();
        this.getHotEE();
        this.getHotCity();
      });
    },
    getUser() {
      //使用时只需要把setOption里的对象换成echarts中的options或者自己的参数即可
      let myChart = echarts.init(document.getElementById("userBT"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "用户比例",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
        },
        series: [
          {
            name: "用户数量",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            data: [
              { value: this.sCount, name: "学生" },
              { value: this.eCount, name: "企业" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    getHotJob() {
      //使用时只需要把setOption里的对象换成echarts中的options或者自己的参数即可
      let myChart = echarts.init(document.getElementById("hotJob"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "热门岗位", //主标题
          x: "center", //x轴方向对齐方式
        },
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          data: this.position,
          axisLabel: { interval: 0 },
        },
        yAxis: {
          type: "value",
        },
        series: [
          { name: "简历投递数量", data: this.positionCount, type: "line" },
        ],
      });
    },
    getHotCity() {
      let myChart = echarts.init(document.getElementById("hotCity"));
      myChart.setOption({
        title: {
          text: "热门城市", //主标题
          x: "center", //x轴方向对齐方式
        },
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          data: this.cityName,
        },
        yAxis: {
          type: "value",
        },
        series: [{ name: "热门企业", data: this.cityCount, type: "bar" }],
      });
    },
    getHotEE() {
      let myChart = echarts.init(document.getElementById("hotEE"));
      myChart.setOption({
        title: {
          text: "热门企业", //主标题
          x: "center", //x轴方向对齐方式
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "热门岗位数量",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.hotEE,
          },
        ],
      });
    },
  },
};
</script>

<style>
.grid-content {
  display: flex;
  align-items: center;
  height: 30px;
}

.grid-cont-center {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: darkgray;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>